<template>
  <div class="activity-main">
    <media :query="{minWidth: 768}">
      <div class="pc-media">
        <div class="activity-img" v-if="info.HeadLogo!=null">
          <img :src="info.HeadLogo">
        </div>
        <div class="activity-text">
          <h3>{{info.Theme}}</h3>
          <p v-if="info.ThemeTime!=null">
            <van-icon name="clock"/>
            <span>{{info.ThemeTime}}</span>
          </p>
          <p v-if="info.Adress!=null">
            <van-icon name="location"/>
            <span>{{info.Adress}}</span>
          </p>
        </div>
      </div>
    </media>
    <media :query="{maxWidth: 768}">
      <div class="mb-media">
        <div class="activity-img" v-if="info.HeadLogo!=null">
          <img :src="info.HeadLogo">
        </div>
        <div class="activity-text">
          <h3>{{info.Theme}}</h3>
          <p v-if="info.ThemeTime!=null">
            <van-icon name="clock"/>
            <span>{{info.ThemeTime}}</span>
          </p>
          <p v-if="info.Adress!=null">
            <van-icon name="location"/>
            <span>{{info.Adress}}</span>
          </p>
        </div>
      </div>
    </media>
  </div>
</template>

<script>
import Media from 'vue-media';
export default {
  name: 'activityInfo',
  props: ['info'],
  components: {
    media: Media
  }
};
</script>

<style scoped>
.activity-main>.mb-media{
  margin: 10px 0 0 0;
}
.activity-main>.pc-media{
  margin: 20px 0 0 0;
  display: flex;
  justify-content: space-between;
  border: 1px solid #dcdcdc;
  padding: 20px;
}
.mb-media .activity-img{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pc-media .activity-img{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mb-media .activity-text{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pc-media .activity-text{
  flex: 1;
  margin: 0 0 0 20px;
  display: flex;
  flex-direction: column;
}
.activity-text>h3{
  width: 100%;
  margin: 5px 0;
  font-size: 1.1em;
}
.activity-text>p{
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0 0 5px 0;
}
.activity-text>p>i{
  margin: 0 5px 0 0;
}
.activity-text>p>span{
  display: inline-block;
  flex: 1;
}
</style>

